/*
 * @Author: dagu 243065157@qq.com
 * @Date: 2025-01-26 14:55:09
 * @LastEditors: dagu 243065157@qq.com
 * @LastEditTime: 2025-03-21 17:20:43
 * @FilePath: \format-bug-msg\src\App.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
/*
 * @Author: dagu
 * @Description: 主应用组件
 */

import { FC, useState } from 'react';
import './App.css';
import ErrorGenerator from './ErrorGenerator';
import AspectRatioCalculator from './components/AspectRatioCalculator';
import './index.css';

const App: FC = () => {
  const [showCalculator, setShowCalculator] = useState(false);

  return (
    <div className='App'>
      <div className='flex w-full h-screen'>
        <button
          onClick={() => setShowCalculator(true)}
          className='absolute right-[100px] top-[40px] px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors'
        >
          打开比例换算器
        </button>
        <div className='p-4 w-full'>
          <ErrorGenerator />
        </div>
      </div>

      {showCalculator && <AspectRatioCalculator onClose={() => setShowCalculator(false)} />}
    </div>
  );
};

export default App;
